<template>
  <div class="receipt-container" ref="printArea">
    <div class="print-header">
      <h2 class="title">支 付 凭 证</h2>
      <!-- <div>打印次数：{{ form.printCount }}</div> -->
    </div>

    <div class="main-box">
      <div class="left-tip">
        提示：如需办理退款结算或款项类型发生变更均需交回收据原件，要求本人办理并携带中介合同、身份证及相关资料，要求产权证明体现的所有产权人出面签字。
      </div>
      <div class="right-form-box">
        <div class="top-info">
          <div>合同编号：{{ form.contractNo }}</div>
          <div>{{ currentDate }}</div>
          <div>编号：{{ form.billNo }}</div>
        </div>
        <div class="right-form">
          <div class="form-row">
            <div class="form_in" style="display: flex">
              <span style="width: 18%; text-align: center">今收到</span
              ><span class="underline" style="width: 82%">
                <span style="padding: 0 8px">{{ form.userName }}</span>
                {{ form.propertyAddress }}
              </span>
            </div>
          </div>
          <div class="form-row">
            <div class="form_in" style="display: flex">
              <span style="width: 18%; text-align: center">交 来</span
              ><span class="underline" style="width: 82%">{{
                form.billType
              }}</span>
            </div>
          </div>
          <div class="form-row">
            <div class="form_in" style="display: flex">
              <div style="display: flex; width: 60%">
                <span style="width: 30%; text-align: center"
                  >人民币（大写）</span
                ><span class="underline" style="width: 70%">{{
                  form.chineseAmount
                }}</span>
              </div>
              <div style="display: flex; width: 40%">
                <span style="width: 37%; text-align: center">￥（小写）</span
                ><span class="underline" style="width: 63%">{{
                  form.totalAmount
                }}</span>
              </div>
            </div>
          </div>

          <div class="form-row">
            <div class="form_in" style="display: flex">
              <div style="display: flex; width: 60%">
                <span style="width: 30%; text-align: center">收款人</span
                ><span class="underline" style="width: 70%">华中置业</span>
              </div>
              <div style="display: flex; width: 40%">
                <span style="width: 37%; text-align: center">交款人</span
                ><span class="underline" style="width: 63%">{{
                  form.userName
                }}</span>
              </div>
            </div>
          </div>
          <div class="form-row" style="text-align: center; margin-bottom: 0">
            <span>白联：记账联；粉联：客户联；黄联：存根联</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  form: {
    type: Object,
    required: true,
  },
});
const printArea = ref(null);
const currentDate = `${new Date().getFullYear()}年${
  new Date().getMonth() + 1
}月${new Date().getDate()}日`;
defineExpose({
  printArea,
});
</script>
<style scoped>
.receipt-container {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #333;
  padding: 10px 20px;
  font-size: 14px;
  font-family: SimSun, serif;
  position: relative;
}
.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  width: 70%;
}
.top-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 10px;
}
.main-box {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  /* justify-content: space-between; */
}
.left-tip {
  width: 15%;
  /* padding: 10px; */
  padding-right: 10px;
  font-size: 12px;
}
.right-form-box {
  width: 81%;
}
.right-form {
  width: 100%;
  padding: 10px;
  border: 1px solid #333;
}
.underline {
  border-bottom: 1px solid #000;
  display: inline-block;
  min-width: 150px;
}
.blank {
  min-width: 100px;
}
.ml-10 {
  margin-left: 10px;
}
.print-btn {
  margin-top: 20px;
}
.form-row {
  margin-bottom: 20px;
}
</style>
